<!DOCTYPE html>
<html>
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="本页所有尺寸都使用rem布局，也是移动端开发app常用尺寸">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
	<!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<title>rem布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		/*主体*/
		div.container{
			position: relative;
			width: 100%;
			max-width: 640px;
			min-width: 320px;
			margin: 0 auto;
		}
		/*导航*/
		.header_area{
			height: 1.3rem;
			width: 100%;
			position: fixed;
			left: 0px;
			top: 0px;
			z-index: 9999;
			background-image: url('icon/nav.png');
			background-repeat: no-repeat;
			background-position:center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			text-align: center;
		}
		a.backBtn{
			position: absolute;
			width: 0.32rem;
			height: 0.64rem;
			background-image: url('icon/back.png') !important;
			display: block;
			background-size: 100% 100% !important;
			left: 0.52rem;
			top: 50%;
			transform: translateY(-50%);
		}
		.header_area p{
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 1.3rem;
			font-size: 0.48rem;
			color: white;
		}
		/*图标*/
		.logo_area{
			margin-top: 1.3rem;
			width: 100%;
			height: 6.3rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.logo_area img{
			max-width: 100%;
			height: 3.1rem;
		}
		/*表单区域*/
		.login_area{
			width: 100%;
			height: auto;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.login_area input{
			font-size: 0.38rem;
			width: 9rem;
			height: 1.3rem;
			border-radius: 0.05rem;
			border: none;
			outline: none;
			box-shadow: 1px 1px 4px rgba(0,0,0,.2);
			padding-left: 0.2rem;
			box-sizing: border-box;
		}
		input[name="pwd"]{
			margin-top: 0.8rem;
			margin-bottom: 0.6rem;
		}
		.other_area{
			width: 9rem;
			margin: auto;
			height: auto;
			display: flex;
			justify-content: space-between;
			margin-bottom: 1.76rem;
		}
		.other_area a{
			display: block;
			font-size: 0.28rem;
			border: 1px solid rgba(0,0,0,.2);
			border-radius: 0.05rem;
			height: 0.6rem;
			width: 1.6rem;
			line-height: 0.6rem;
			color: rgba(0,0,0,.4);
			background-color: white;
			text-align: center;
			text-decoration: none;
		}
		.submit_area{
			width: 100%;
			height: auto;
			display: flex;
			justify-content: center;
		}
		.submit_area button{
			font-size: 0.38rem;
			width: 4.2rem;
			height: 1.2rem;
			background-color: #f23a38;
			border: none;
			border-radius: 0.1rem;
			color: white;
		}
	</style>
	<script type="text/javascript" src="./flexible.js"></script>
</head>
<body>

	<div class="container">
		<div class="header_area">
			<a class="backBtn" href="javascript:history.back(-1)"></a>
			<p>登录</p>
		</div>
		<div class="logo_area">
			<img src="icon/qixi.png">
		</div>
		
		

		<form class="login_area">
			<input type="number" name="accounts" placeholder="输入账号">
			<input type="password" name="pwd" placeholder="输入密码">
			<div class="other_area">
				<a href="javascript:;">忘记密码</a>
				<a href="javascript:;">立即注册</a>
			</div>
			<div class="submit_area">
				<button>登录</button>
			</div>
		</form>
	</div>
</body>
</html>


